<template>
  <div>
    <!-- <div>编号：{{ state.id }}</div>
    <div>姓名：{{ state.name }}</div> -->
    <div>编号：{{ id }}</div>
    <div>姓名：{{ name }}</div>
    <button @click="addCount">+++++++</button>
  </div>
</template>

<script>
// 把对象中的数据转为ref数据
// toRef它一般在大对象中取较少的属性数据，如果把一个对象全转成ref  toRefs
import { reactive, toRef, toRefs } from 'vue'

export default {
  setup() {
    const state = reactive({
      id: 1,
      name: '张三'
    })
    // const id = toRef(state, 'id')
    // const name = toRef(state, 'name')

    const addCount = () => {
      // console.log(toRefs(state))
      state.id++
    }

    return {
      // state,
      // id,
      // name,
      ...toRefs(state),
      addCount
    }
  }
}
</script>

<style lang="scss"></style>
